<template>
    <el-row class="module-detail">
        <div class="m-head">
            <div class="add-type">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xinjian"></use>
                </svg>
                <span>{{form.id!=='add'?'修改模版':'新建模版'}}</span>
            </div>
            <el-form ref="form" class="o-form" label-position="right" label-width="120px" :model="form" :rules="rules">
                <el-form-item label="模版名称:" prop="name">
                    <el-input :maxlength="40" v-model="form.name"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="add-type">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-mulufenceng-shu"></use>
            </svg>
            <span>文案分层</span>
        </div>
        <ul class="word-ul">
            <li>
                <div class="level">
                    层级
                </div>
                <div class="start">
                    开始值
                </div>
                <div class="line">
                </div>
                <div class="end">
                    结束值
                </div>
                <div class="word">
                    文案
                </div>
                <div class="remark">
                    备注
                </div>
                <div class="option">
                </div>
            </li>
            <li v-for="(word,i) in form.list">
                <div class="level num">
                    {{i+1}}
                </div>
                <div class="start tip">
                    <span>(</span>
                    <el-input type="number" v-model="word.minInterval"></el-input>
                </div>
                <div class="line">
                    -
                </div>
                <div class="end tip">
                    <el-input type="number" v-model="word.maxInterval"></el-input>
                    <span>]</span>
                </div>
                <div class="word">
                    <el-input type="textarea" rows="3" v-model="word.passDescribe"></el-input>
                </div>
                <div class="remark">
                    <el-input type="textarea" rows="3" v-model="word.passRemark"></el-input>
                </div>
                <div class="option">
                    <span @click="addItem(i)">+</span>
                    <span class="cut" v-show="form.list.length>1" @click="cutItem(i)">-</span>
                </div>
            </li>
        </ul>
        <div class="btn-div">
            <el-button :disabled="addDisabled" type="primary" class="height-btn" @click="sure">确定</el-button>
            <el-button class="light-btn" @click="$router.go(-1)">取消</el-button>
        </div>
    </el-row>
</template>
<script>
import Upload from '../../common/Upload'
import VPagination from '../../common/Pagination'
import { mapState, mapActions } from 'vuex'
import io from 'lib/io'
import util from 'lib/util'
export default {
    components: {
        Upload,
        VPagination
    },
    data() {
        return {
            addDisabled: false,
            form: {
                id: this.$route.params.id,
                name: '',
                list: []
            },
            item: { passRemark: "", minInterval: 0, passDescribe: "", maxInterval: 0 },
            rules: {
                name: [{ required: true, message: '模版名称不能为空！', trigger: 'change' }],
            },
        }
    },
    watch: {
        'form.list':{
            handler(list){
                list.map((item,i)=>{
                    item.minInterval=item.minInterval&&item.minInterval.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
                    item.maxInterval=item.maxInterval&&item.maxInterval.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
                })
            },deep:true
        }
    },
    created() {
        if (this.form.id !== 'add') {
            this.wordDetail({ id: this.form.id })
        } else {
            this.form.list.push({...this.item})
        }
    },
    methods: {
        addItem(i) {
            let lastMax = this.form.list[i].maxInterval
            this.form.list.push({ ...this.item })
        },
        cutItem(i) {
            this.form.list.splice(i, 1)
        },
        ...mapActions([]),
        async wordDetail(opt) {
            let { data } = await io.post6(io.wordDetail, opt)
            if (data.success) {
                this.form = data.data
            }
        },
        sure() {
            this.addDisabled = true
            setTimeout(() => {
                this.addDisabled = false
            }, 2000)
            this.$refs.form.validate((vali) => {
                if (vali) {
                    if (!String.trim(this.form.name).length) {
                        this.$message('名称不允许只输入空格')
                        return
                    }
                    let list = this.form.list
                    if(list[0].minInterval===''){
                        this.$message('开始值不能为空！')
                        return
                    }
                    let full=true
                    for (let i = 0; i < list.length; i++) {
                        if (Number(list[i].minInterval) >= Number(list[i].maxInterval)) {
                            this.$message('结束值要大于开始值')
                            full=false
                            break
                        }
                        if (list[i + 1] && Number(list[i].maxInterval) !== Number(list[i + 1].minInterval)) {
                            this.$message('开始值要等于上层级的结束值')
                            full=false
                            break
                        }
                        if(!list[i].passDescribe){
                            this.$message('文案不能为空')
                            full=false
                            break
                        }
                    }
                    full&& this.addOrUpdateModule()
                } else {
                    this.$message('您还有必填项未填！')
                    return
                }
            })
        },

        async addOrUpdateModule() {
            let id = this.form.id === 'add' ? '' : this.form.id
            let url = this.form.id === 'add' ? io.addWord : io.updateWord
            let { data } = await io.post6(url,{json:JSON.stringify({ ...this.form, id})} )
            if (data.success) {
                this.$message({ message: '保存成功', type: 'success' })
                    this.$router.go(-1)
            }
        }
    }
}
</script>
<style lang="stylus" scoped>
@import '~assets/stylus/mixin.styl'
.module-detail
    .m-head
        padding-bottom 50px
        border-bottom 2px solid #CDCDCD
    .has-course-btn
        margin-top 30px
    .add-type
        height 45px
        line-height 45px
        margin-left 35px
        margin-top 30px
        text-align left
        font-size 18px
        font-weight bold
        .icon
            font-size 36px
        button
            float right 
            margin-top 7.5px
        .el-button
            background #1ebd99
            color #ffffff
            font-size 14px
            border 1px solid #1ebd99
            border-radius 15px
            height 30px
    .gray
        table-form()
        padding-top 15px
        padding-right 20px
        padding-bottom 10px
        .el-form-item
            margin-bottom 0
    .o-form
        padding 0 200px
        margin auto
        margin-top 50px
        .el-select
            width 100%
            
    .head
      margin-top 10px
    .free-num
        margin-left 10px
        font-style normal
    .personal
        border 0
        color #606266
        &:hover
            background transparent
    .opt-btn
        text-align center
        margin-top 40px
    .surport
        color #ff7800
        padding-left 40px
.has-course
    // padding 20px 50px 
    .t-form
      padding 22px 20px 0 20px
      background #f7f7f7
      .el-select
        width 120px
    .search-table
      padding 20px 20px 0 20px

.option 
    display flex
    span
        cursor pointer
        background #8CD4EA
        font-size 30px
        color #ffffff
        margin 0 15px
        width 32px
        height 32px
        border-radius 4px
        &.cut
            line-height 30px
.word-ul
    margin-left 70px
    margin-top 30px
    text-align center
    font-size 16px
    li
        display flex
        align-items center
        margin-bottom 20px
        &:nth-child(even)
            .num,.tip
                color #0BADDE
            .option span 
                background #8cd4ea
        &:nth-child(odd)
            .num,.tip
                color #0BDEBE
            .option span 
                background #79E5D1
        .el-input
            width 68px
            vertical-align middle
        .level
            width 40px
            margin-right 20px
            &.num
                font-size 48px
        .line
            width 18px
        .start,.end
            width 88px
            &.tip
                font-size 29px
        .word,.remark
            flex 1 
        .word
            margin-left 30px
            margin-right 15px
        .option
            width 136px
            margin-left 15px
.btn-div
    text-align center
    margin-top 70px
    margin-bottom 30px
</style>
<style lang="stylus">
.data-detail .gray
    .el-form-item__label,.el-form-item__content
        line-height 30px
        font-size 14px
        font-weight normal 
.table-radio
    .el-radio__label
        display none
.add-has
    .el-dialog
        width 60%
        min-width 740px
.module-detail
    .word-ul
        .el-input__inner
            height 30px !important
            border-radius 0
            color #030000
        li:nth-child(even)
            .el-input__inner
                background #C0EBF8
        li:nth-child(odd)
            .el-input__inner
                background #9AE6D8

</style>


